<template>
    <div class="warehouseMain">
        <div class="titleBg">
            <el-button class="addWarehouse" v-show="type == 'list'" @click="addWarehouse">新增仓库</el-button>
            <div v-show="type == 'update'" class="updateWarehouse">
                <el-button class="back" @click="back"><i class="el-icon-arrow-left"></i><span>返回</span></el-button>
                <span>编辑仓库</span>
            </div>
        </div>
        <div class="main">
            <list :list="warehouseList" v-show="type == 'list'" @clickFn="listFn"/>
            <update v-show="type == 'update'" :id="itemID" @back="back"/>
        </div>
        <popUp v-bind="popUpParams" @close="popUpClose" @confirm="popUpConfirm"/>
    </div>
</template>

<script>
import list from './list'
import update from './update'
import popUp from '@/components/pop-up'
import { getWarehouse , getWarehouseInfo , bindWarehouse , delWarehouse , insertWarehouse , modifyWarehouse , removeWarehouse } from './api'
    export default {
        components:{list,update,popUp},
        data(){
            return {
                type:'list', //list is update
                warehouseList:[],
                popUpParams:{},
                itemID:'',
                index:''
            }
        },
        created(){
            this.initList()
        },
        methods:{
            // 弹窗确认
            popUpConfirm(type){
                if(type == "success"){
                    this.popUpParams = {
                        tmpType:'',
                        status:false,
                        title:'',
                        hint:''
                    }
                    removeWarehouse({id:this.itemID})
                    .then((res)=>{
                        this.warehouseList.splice(this.index,1)
                        this.index = ''
                    })
                    .catch((res)=>{
                        if(res.code == -1){
                            this.popUpParams = {
                                tmpType:'fail',
                                status:true,
                                title:'无法删除该仓库',
                                hint:'由于仓库里有资产无法删除该设置，请核对后再操作！'
                            }
                        }
                    })
                }

            },
            // 关闭弹窗
            popUpClose(val){
               this.popUpParams.status = val
            },
            back(par){
                this.type = 'list'
                this.itemID = ''
                this.index = ''
                if(par == 'success'){
                    this.initList()
                }
            },
            addWarehouse(){
               insertWarehouse()
               .then(res=>{
                   this.initList()
               })
            },
            listFn(params){
                let {id,type,index} = params
                this.itemID = id
                this.index = index
                if(type == 'del'){
                    this.popUpParams = {
                        tmpType:'success',
                        status:true,
                        title:'你确定要删除这个仓库吗？',
                        hint:'删除将无法恢复该数据，请谨慎操作！'
                    }
                }else{
                    this.type = 'update'
                }
            },
            // 初始数据
            initList(){
                getWarehouse()
                .then((res)=>{
                    res.forEach((item,index)=>{
                        let str = ''
                        if(item.admin && item.admin.length > 0){
                            item.admin.forEach((e,i)=>{
                                if(i==item.admin.length - 1){
                                    str += e.admin_name
                                }else{
                                    str += `${e.admin_name}、`
                                }
                            })
                        }
                        item.adminStr = str
                    })
                    this.warehouseList = [...res]
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
.warehouseMain{
    width: calc(100% - 60px);
    padding: 30px;
    background: #fff;
    .titleBg{
        width: calc(100% - 26px);
        height: 55px;
        background-color: rgba(244, 245, 244, 1);
        display: flex;
        align-items: center;
        padding-left: 26px;
        .addWarehouse{
            border: 1px solid rgba(49, 150, 250, 1) !important;
            color: rgba(14, 140, 253, 1) !important;
        }
        .updateWarehouse{
            width: 100%;
            height: 55px;
            line-height: 55px;
            display: flex;
            align-items: center;
            > span{
                margin-left: 20px;
                color: rgba(16, 16, 16, 1);
                font-size: 18px;

            }
            .back{
                height: 30px !important;
                line-height: 28px !important;
                color: rgba(172, 172, 172, 1) !important;
                background-color: rgba(255, 255, 255, 0) !important;
                border: 1px solid rgba(172, 172, 172, 1) !important;
                padding: 0 8px!important;
                >span{
                    padding: 0 8px 0 5px;
                }
            }
        }
    }
    .main{
        width: 100%;
        overflow: hidden;
    }
}
</style>